<template>
  <view class="page">
    <Sub-title label="请输入手机号" :bold="false" />
    <u-input
      placeholder="请输入手机号码"
      border="bottom"
      maxlength="11"
      v-model="mobile"
      placeholder-style="fontSize: 24rpx; color: #DADADA"
      clearable
    >
      <u-text text="+86" slot="prefix" margin="0 10rpx 0 0" size="28rpx" type="tips" />
    </u-input>
    <view class="btn" @click="handleSubmit">获取验证码</view>
    <u-text
      text="跳过"
      align="center"
      color="#979797"
      size="28rpx"
      margin="40rpx 0"
      @click="handleHome"
    />
  </view>
</template>
<script>
import { mySendSms } from "@/request/myApi.js";
export default {
  data() {
    return {
      isPass: false, // 是否同意
      mobile: "", // 手机号
    };
  },
  onLoad(e) {
    let info = this.$getStorage("USER_INFO");
    this.mobile = info.mobile;
  },
  methods: {
    // 获取验证码
    handleSubmit() {
      if (!this.mobile) {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
        });
        return;
      }
      if (this.mobile.length != 11) {
        uni.showToast({
          title: "手机号格式有误",
          icon: "none",
        });
        return;
      }
      mySendSms({
        mobile: this.mobile,
        event: "mobilelogin",
      }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: res.data,
            icon: "none",
            success: () => {
              uni.navigateTo({
                url: `/pages/bind/bindCode?mobile=${this.mobile}`,
              });
            },
          });
        }
      });
    },
    // 跳过绑定
    handleHome() {
      uni.showLoading({
        mask: true,
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.switchTab({ url: "/pages/tabBar/qiuIndex" });
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 40rpx;
  .btn {
    margin-top: 100rpx;
    width: 100%;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    color: #979797;
    font-size: 28rpx;
    background-color: #f5f5f5;
    border-radius: 46rpx;
    &:active {
      background-color: #ececec;
    }
  }
}
</style>
